<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的绑定</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 300px;
            height: 300px;
            background-color: #99ff99;
        }
        #box2{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
        #box3{
            width: 100px;
            height:100px;
            background-color: red;
        }
    </style>
    <script>
        window.onload=function () {
        var btn01=document.getElementById("btn01");
        // btn01.addEventListener("click",function(){
        //     alert(1)
        // });
        //     btn01.addEventListener("click",function(){
        //         alert(2)
        //     });
        //     btn01.addEventListener("click",function(){
        //         alert(3)
        //     });

            // btn01.attachEvent("onclick",function () {
            //     alert(11);
            // });
            // btn01.attachEvent("onclick",function () {
            //     alert(12);
            // });
            // btn01.attachEvent("onclick",function () {
            //     alert(13);
            // });
            /*定义一个函数，用来为指定元素绑定响应函数
            *           addEventListener()中的this是绑定事件的对象
            *           attachEvent()中的this 是window
            *       参数 1.obj     要绑定事件的对象
            *           2.eventStr  事件的字符串(不要on)
            *           3.callback   回调函数
            *
            *
            * */
            bind(btn01,"click",function () {
                alert("hello");
            });
            function bind(obj,eventStr,callback) {
               if (obj.addEventListener){
                   //大部分浏览器兼容的方式
                   obj.addEventListener(eventStr,callback,false);
               }else {
                   //IE8及以下版本的
                   obj.attachEvent("on"+eventStr,function () {
                       //在匿名函数中调用回调函数 修改this
                       callbcak.call(obj);
                   });
               }
            }
        }
    </script>
</head>
<body>
<script>
    /*1.addEventListener 可以通过这个方法也可以为元素绑定函数
     *      参数 1.事件的字符串 不要on
     *          2.回调函数，当事件触发时该函数被调用
     *          3.是否在捕获时触发事件，需要一个布尔值 一般都是false
    *          使用addEventListener()可以同时为一个元素添加相同绑定多个响应函数
    *                    IE8及一下版本不支持
    *2.attachEvent()在IE8中可以用这个方法来绑定函数
    *           参数 1.事件的字符串 要on
    *               2.回调函数
    *                   IE8支持 返回的结果是反过来的
    *
    * 3.定义一个函数，用来为指定元素绑定响应函数
    *       addEventListener()中的this是绑定事件的对象
    *       attachEvent()中的this 是window
    *   参数 1.obj     要绑定事件的对象
    *       2.eventStr  事件的字符串(不要on)
    *       3.callback   回调函数
    *   this是谁有调用方式决定
    * 改 用方式
    *   callbcak.call（obj）
    * 4.事件的传播
    *   关于事件的传播网景公司和微软公司有不同的理解
    *   微软公司人为事件应该由内向外传播,即当事件触发时，应该先触发当前元素上的事件
    *       然后在向当前元素的祖先元素上传播 也就是说事件应该在冒泡阶段执行
    *   网景公司人为事件应该是由外向内传播的 即当事件触发时，应该先触发当前元素的最外层的祖先元素的事件
    *       然后在向内传播传给后代元素
    *       W3C综合两公司的方案。将事件分为三个阶段
    *           1.捕获阶段
    *                 在捕获阶段从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
    *           2.目标阶段
    *                 事件捕获到目标元素.捕获结束开始在目标元素上触发事件
    *           3.冒泡阶段
    *                 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
    *           如果希望在捕获节点就触发事件。可以将addElementListener()的第三个参数设置为true
    *           一般情况下，我们不会希望在捕获阶段触发事件。所以这个参数一般都是false
    * */
</script>
<button id="btn01">点我一下</button>
<br/><br />
<div id="box1">
    我是box1
    <div id="box2">
        我是box2
        <div id="box3">我是box3</div>
    </div>
</div>
</body>
</html>